<template>
  <div class="item-list">
    <div class="item">
      <img class="icon" src="../../assets/icon/station.png">
      <router-link to="/appointment">
        <div class="item-body">
          <h2>预约工位</h2>
          <p>可为自己或他人进行工位预约</p>
        </div>
      </router-link>
      <img class="arrow" src="../../assets/icon/arrow.png">
    </div>

    <router-link to="/my-reservation">
      <div class="item">
        <img class="icon" src="../../assets/icon/appointment.png">
        <div class="item-body">
          <h2>我的预约</h2>
          <p>展示预约中、使用中和历史预约工位</p>
        </div>
        <img class="arrow" src="../../assets/icon/arrow.png">
      </div>
    </router-link>

    <router-link to="/station-query">
      <div class="item">
        <img class="icon" src="../../assets/icon/search.png">
        <div class="item-body">
          <h2>工位查询</h2>
          <p>输入姓名或工位编号进行查询</p>
        </div>
        <img class="arrow" src="../../assets/icon/arrow.png">
      </div>
    </router-link>
    <router-link to="/">
      <div class="item">
        <img class="icon" src="../../assets/icon/scan.png">
        <div class="item-body">
          <h2>扫一扫</h2>
          <p>扫描座位二维码，使用或注销工位</p>
        </div>
        <img class="arrow" src="../../assets/icon/arrow.png">
      </div>
    </router-link>
    <router-link to="/repairs">
      <div class="item">
        <img class="icon" src="../../assets/icon/repair.png">
        <div class="item-body">
          <h2>工位报修</h2>
          <p>可为自己或他人进行工位预约</p>
        </div>
        <img class="arrow" src="../../assets/icon/arrow.png">
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'Index'
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.item-list
  padding-top: 0.11rem;
.item
  background: $white;
  margin-bottom: 0.04rem;
  padding: 0.42rem 0.22rem 0.42rem 0.4rem;
  position: relative;
  img
    display: block;
  .icon
    float: left;
    margin-right: 0.36rem;
    display: block;
    width: 0.96rem;
    height: 0.96rem;
  .arrow
    width: 0.46rem;
    height: 0.46rem;
    position: absolute;
    right: 0.22rem;
    top: 50%;
    transform: translateY(-50%);
  .item-body
    height: 0.96rem;
    padding-right: 1rem;
    h2
      line-height: 0.52rem;
      font-size: 0.32rem;
      color: $darkText;
    p
      line-height: 0.44rem;
      font-size: 0.28rem;
      color: $lightDarkText;
    .yd-cell-arrow:after
      color: $grayIcon;
</style>